<template>
  <div>
      <div class="container">
          <div>
            <el-form :model="formInline" :rules="rules"  ref="formInline" class="select-submit-form">
                <el-row type="flex" >
                    <!-- <el-col :span="8" >
                        <el-form-item label="承保机构" prop="comCName">
                          <el-autocomplete
                              popper-class="my-autocomplete"
                              v-model="formInline.comCName"
                              :fetch-suggestions="querySearch"
                              placeholder="请输入承保机构"
                              class="class_b"
                              @select="handleSelect">
                              >
                              <template slot-scope="{ item }">
                                <div>{{item.value}}-{{item.comCode}}</div>
                              </template>
                            </el-autocomplete>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8" >
                        <el-form-item label="社/医保号" prop="hospName">
                            <el-input  placeholder="社/医保号"  v-model='formInline.hospName'></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8" >
                        <el-form-item label="被保险人" prop="insuredName">
                             <el-input  placeholder="请输入被保险人"  v-model='formInline.insuredName'></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                      <el-form-item label="证件号" prop="insuredIdentifyNumber">
                           <el-input  placeholder="请输入证件号"  v-model='formInline.insuredIdentifyNumber' @change="blurText"></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex" >
                    <el-col :span="8" >
                        <el-form-item label="出险时间" prop="damageDate">
                            <el-date-picker  :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择出险时间" v-model='formInline.damageDate'></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="select-btn-group">
                      <el-button type="primary" size="medium"  @click="onSubmit('formInline')">查询</el-button>
                      <el-button type="primary" size="medium" @click="resetForm('formInline')">重置</el-button>
                    </div>
                  </el-col>
                </el-row>
            </el-form>
          </div>
          <!-- <template>
              <div>
                  <el-divider></el-divider>
              </div>
          </template> -->
          <el-table
                  :data="tableData"
                  class="table"
                  ref="multipleTable"
                  header-cell-class-name="table-header"
                  style="margin: 30px 0;border: 1px solid #d6d9d8;"
                  v-loading="loading"
                  element-loading-text="Loading....."
          >
              <el-table-column prop="policyNo" label="保单号" align="center" width="168px">
                  <template  slot-scope="scope">                        
                    <router-link
                    :to="{
                        name: 'caseProcessDetail', 
                        params: { policyNo: scope.row.policyNo,
                        insuredIdentifyNumber: scope.row.insuredIdentifyNumber,
                        damageDate: scope.row.damageDate,
                        name:'cache'
                        }
                      }">
                        <a href="#" style="color: #409EFF" >{{scope.row.policyNo}}</a>
                    </router-link>
                </template>
              </el-table-column>
              <el-table-column prop="insuredName" label="被保险人"  align="center"></el-table-column>
              <el-table-column prop="insuredIdentifyNumber" label="被保险人证件号"   align="center"></el-table-column>
              <el-table-column prop="socialSecurityNo" label="社/医保号"  align="center"></el-table-column>
              <el-table-column prop="startDate" label="起保日期"  align="center"></el-table-column>
              <el-table-column prop="endDate" label="终保日期"  align="center"></el-table-column>
              <!-- <el-table-column label="操作" align="center" >
                  <template slot-scope="scope">
                      <el-button  type='text' @click="toDetail(scope.row)">案件登记</el-button>
                  </template>
              </el-table-column> -->
          </el-table>
        <div style="margin-top: 15px">
          <template>
            <div class="pagination">
              <el-pagination v-show=" pagination.totalPage>0" :current-page="pagination.currentPage"
                             :page-sizes="[10, 25, 50, 100]"
                             :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                             @current-change="queryFun" @size-change="handleSizeChange">
              </el-pagination>
            </div>
          </template>
        </div>
    </div>
  </div>
</template>

<script>
  import util from '@/libs/util';
  import * as api from '@/api/baseDate';
  import Cookies from "js-cookie";
  export default {
    name: 'registerCache',
    data() {
      return {
        isPageZ: false,
        restaurants:[],
        loading: false,
        rules:{ // 终止日期不能早于开始日期
          damageDate:[{ required: true, message: '出险时间不能为空', trigger: 'blur' }]
        },
        // 分页初始化数据
        pagination: {
          currentPage: 1, // 当前页
          rowsNumber: 10, // 每页条数
          totalPage: 0 // 总条数
        },
        redore: true,
        guanzhus: null,
        centerDialogVisible: false,
        query: {
          address: '',
          name: '',
          pageIndex: 1,
          pageSize: 10
        },
        tableData: [],
        multipleSelection: [],
        delList: [],
        editVisible: false,
        pageTotal: 3,
        form: {},
        idx: -1,
        id: -1,
        formInline: {
          comCode: "",
          socialSecurityNo: "",
          insuredName: "",
          insuredIdentifyNumber: "",
          caseNo: "",
          clmNo: "",
          damageDate: ''
        },
        pickerOptions: {
          selectableRange:(()=>{
        　　let data=new Date();
                let hour=data.getHours();
                let minute=data.getMinutes();
                let second=data.getSeconds();
                return [`00:00:00 - ${hour}:${minute}:${second}`]
          })(),
        disabledDate(time) {
          return time.getTime() > Date.now();
          }
        },
      };
    },
    created() {
      //this.getAllUpperCompanys();
    },
    methods: {
      blurText(){
        //解决VUE 分页BUG
        this.isPageZ = true;
        this.pagination.currentPage = 1;
      },
      handleSelect(item){
        this.formInline.comCode=item.comCode;
      },
      //医疗机构查询
      getAllUpperCompanys(){
        api.getAllUpperCompany({
        "head": "",
        "body": Cookies.get("makeCom")
       //  "body": "0232030030000"
        }).then(res => {
          this.restaurants=res.data.map((parms)=>{
        return{
          comCode:parms.comCode,
          value:parms.comCName
        }
      })
        })
      },
       //机构双击查询
       querySearch(queryString, cb) {
         debugger
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        if (results.length === 0) {
            this.formInline.comCode=null;
            this.formInline.comCName=null;
            cb(restaurants);
        } else {
            cb(results);
        }
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      // 跳转明细页面
      toDetail(e) {
        this.$router.push({
          name: 'caseProcessDetail',
          params: {
            policyNo: e.policyNo,
            insuredIdentifyNumber: e.insuredIdentifyNumber,
            damageDate: e.damageDate,
            name:"cache"
          }
        })
      },

      handleSizeChange(pageSize) { // 改变当前页条数事件
        this.pagination.rowsNumber = pageSize;
        this.onSubmit('formInline');
      },
      queryFun(pageNum) { // 改变当前页事件
        debugger
        this.pagination.currentPage = pageNum
        this.onSubmit('formInline');
      },
      onSubmit(formInline) {
        this.$refs[formInline].validate((valid) => {
          if (valid) {
            this.loading = true;
            api.queryCasePolicyNoList({
              "head": {
                "resultCode": "0000",
                "resultMsg": "对接承包案件查询列表完成！"
              },
              "body": {
                "socialSecurityNo": this.formInline.socialSecurityNo,
                "insuredName": this.formInline.insuredName,
                "insuredIdentifyNumber": this.formInline.insuredIdentifyNumber,
                "caseNo": this.formInline.caseNo,
                "clmNo": this.formInline.clmNo,
                "comCode":Cookies.get("makeCom"),
                "damageDate":this.formInline.damageDate,
                "pageNum": this.pagination.currentPage,
                "pageSize": this.pagination.rowsNumber
              }
            }).then(res => {
              this.loading = false;
              this.tableData = res.data.list;
              this.pagination.totalPage = res.data.total;
              util.stopLoading(this);
            })
          }
          else {
            console.log('error submit!!');
            return false;
          }

        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }

  .col_a {
    margin-left: 2%;
  }

  .el-card {
    height: 200px;
  }

  /deep/.el-button--text{
    line-height: 3px
  }
  .class_b /deep/ .el-input__inner {
      background-color: #f9f9f9;
    }
</style>
